<template>
  <div class="allorder">
      <el-table   style="width:100%;margin-left:-18px;"
          :data="tableData" border  class="cate_table"  >

           <el-table-column
            align="center"
            prop="number"
            label="订单号"
            width="150px"
          >
          </el-table-column>

          <el-table-column
            align="center"
            prop="status"
            label="订单状态"
            width="100px"
          >
            <template slot-scope="scope">

              <option v-if="scope.row.status===2" label="待接单" value="1">待接单</option>
               <option v-if="scope.row.status===3" label="已接单" value="1">已接单</option>
              <option v-if="scope.row.status===4" label="派送中" value="2">派送中</option>

              <option v-if="scope.row.status===5" label="已完成" value="4">已完成</option>
              <option v-if="scope.row.status===6" label="已取消" value="5">已取消</option>
              <option v-if="scope.row.status===7" label="已拒单" value="5">已拒单</option>
            </template>
          </el-table-column>

          <el-table-column align="center" label="用户名"  prop="consignee" width="100px">

          </el-table-column>

          <el-table-column
            align="center"
            prop="phone"
            label="手机号"
            width="120px"   >

          </el-table-column>

          <el-table-column align="center" prop="address" label="地址" width="194px">

          </el-table-column>

          <el-table-column
            align="center"
            prop="orderTime"
            label="下单时间"
            width="160px"
          >
           </el-table-column>

           <el-table-column
            align="center"
            prop="amount"
            label="实收金额"
            width="90px"   >
            <template slot-scope="scope">
           <span>￥{{scope.row.amount}}</span>

           </template>

          </el-table-column >
         <!--  <template slot-scope="scope">
              {{scope.row.updateTime ? scope.row.updatetime.replace('T',' '):''}}
          </template> -->

            <el-table-column align="center" label="操作" width="230px">
             <template slot-scope="scope">
               <div v-if="scope.row.status===2">
            <el-button style="border:none;color:rgb(64,158,255)" @click="receivingorders( scope.$index)"  size="mini"  >接单</el-button >
            <el-button  style="border:none;color:rgb(245,108,108)" @click="reject( scope.$index)"  size="mini">拒单</el-button>
            <el-button  style="border:none;color:rgb(64,158,255)" @click="viewChandler( scope.$index)"  size="mini">查看</el-button>
              </div>

              <div v-if="scope.row.status===3">
            <el-button style="border:none;color:rgb(64,158,255)" @click="dispatch( scope.$index)"  size="mini"  >派送</el-button >
             <el-button  style="border:none;color:rgb(245,108,108)" @click="cancel( scope.$index)"  size="mini">取消</el-button>

            <el-button  style="border:none;color:rgb(64,158,255)" @click="viewChandler( scope.$index)"  size="mini">查看</el-button>
              </div>

               <div v-if="scope.row.status===4">
            <el-button style="border:none;color:rgb(64,158,255)" @click="complete( scope.$index)"  size="mini"  >完成</el-button >
             <el-button  style="border:none;color:rgb(245,108,108)" @click="cancel( scope.$index)"  size="mini">取消</el-button>

            <el-button  style="border:none;color:rgb(64,158,255)" @click="viewChandler( scope.$index)"  size="mini">查看</el-button>
              </div>

              <div v-if="scope.row.status===5">

             <el-button  style="border:none;color:rgb(245,108,108)" @click="cancel( scope.$index)"  size="mini">取消</el-button>

            <el-button  style="border:none;color:rgb(64,158,255)" @click="viewChandler( scope.$index)"  size="mini">查看</el-button>
              </div>

              <div v-if="scope.row.status===6">
            <el-button style="border:none;color:rgb(64,158,255)" @click="remove( scope.$index)"  size="mini"  >删除</el-button >

            <el-button  style="border:none;color:rgb(64,158,255)" @click="viewChandler( scope.$index)"  size="mini">查看</el-button>
              </div>

               <div v-if="scope.row.status===7">
           <el-button  style="border:none;color:rgb(245,108,108)" @click="cancel( scope.$index)"  size="mini">取消</el-button>

            <el-button  style="border:none;color:rgb(64,158,255)" @click="viewChandler( scope.$index)"  size="mini">查看</el-button>
              </div>

           </template>

          </el-table-column>

        </el-table>
 <!-- 订单详情弹窗 -->
       <OrderDetail @refreshs="refresh"></OrderDetail>
  </div>
</template>

<script>
import Bus from '@/utils/EventBus'
import { updateStatus, removeOrder } from '@/api/orderDetail'
import OrderDetail from '@/components/main/order/orderdetail.vue'
export default {
  name: 'allorderIndex',
  components: {
    OrderDetail
  },
  props: {
    tableData: Array
  },
  data () {
    return {
      dialogVisible: false

    }
  },

  mounted () {
    this.refresh()
  },

  methods: {
    // 刷新
    refresh () {
      this.$emit('refresh')
    },

    // 查看订单
    viewChandler (index) {
      Bus.$emit('view', !this.dialogVisible, this.tableData, index)
    },
    // 修改订单状态-接单
    async  receivingorders (index) {
      await updateStatus(this.tableData[index].id, 3)
      this.$emit('refresh')
    },
    // 修改订单状态-拒单
    reject (index) {
      this.$confirm('确认要拒单吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        updateStatus(this.tableData[index].id, 7).then((result) => {
          if (result.code === 1) {
            // 重新查询数据
            this.$message.success('恭喜你，拒单成功')
            this.$emit('refresh')
          } else {
            this.$message.error('很遗憾，拒单失败')
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消动作'
        })
      })
    },
    // 修改订单状态-派送
    async  dispatch (index) {
      await updateStatus(this.tableData[index].id, 4)
      this.$emit('refresh')
    },

    // 修改订单状态-完成
    async  complete (index) {
      await updateStatus(this.tableData[index].id, 5)
      this.$emit('refresh')
    },

    // 修改订单状态-取消
    cancel (index) {
      this.$confirm('确认要取消订单吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        updateStatus(this.tableData[index].id, 6).then((result) => {
          if (result.code === 1) {
            // 重新查询数据
            this.$message.success('恭喜你，取消订单成功')
            this.$emit('refresh')
          } else {
            this.$message.error('很遗憾，取消订单失败')
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消动作'
        })
      })
    },

    // 修改订单状态-删除
    remove (index) {
      this.$confirm('确认要删除订单吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        removeOrder(this.tableData[index].id).then((result) => {
          if (result.code === 1) {
            // 重新查询数据
            this.$message.success('恭喜你，删除订单成功')
            this.$emit('refresh')
          } else {
            this.$message.error('很遗憾，删除失败')
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }

  }
}
</script>

<style lang="less" secoped>

// 表格
.order_main{
  width: 1145px;
  height: 450px;
  padding-top: 40px;
  padding-left: 40px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.058);
  margin-top:40px;
  margin-left:20px
}

</style>
